<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>本地网页</title>
		<style type="text/css">
			.btn {
				display: block;
				margin: 20px auto;
				padding: 5px;
				background-color: #007aff;
				border: 0;
				color: #ffffff;
				height: 40px;
				width: 200px;
			}

			.btn-red {
				background-color: #dd524d;
			}

			.desc {
				padding: 10px;
				color: #999999;
			}
		</style>
	</head>

	<body>
		<div class="btn-list">
			<button class="btn btn-red" type="button" id="postMessage">postMessage</button>
		</div>
		<div class="btn-list">
			<button class="btn btn-red" type="button" id="postMessage1">获取系统信息</button>
		</div>
		<div class="btn-list">
			<button class="btn btn-red" type="button" id="forward">路由前进</button>
		</div>
		<div class="btn-list">
			<button class="btn btn-red" type="button" id="update">安卓app在线升级</button>
		</div>
		<img src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/logo.png" alt="">
		<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->
		<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
		<!-- uni 的 SDK，必须引用。 -->
		<script type="text/javascript" src="./uni.webview.1.5.5.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				// 获取uniapp 给我们的设备信息和系统信息
				console.log('deviceInfo', JSON.parse(localStorage.getItem('deviceInfo')));
			}
            // 向UNIAPP注入JS-SDK
			function Invoke(data) {
				const tp = new Date().getTime().toString()
				data = {
					type: 'Invoke',
					...data,
					tp
				}
				window[`InvokeSuccess${ tp}`] = data.success;
				window[`InvokeFail${tp}`] = data.fail;
				window[`InvokeOnProgress${tp}`] = data.onProgress;
				// ios函数无法被uniapp克隆 所以要删除掉函数字段
				delete data.success;
				delete data.fail;
				delete data.onProgress;
				uni.postMessage({data});
			}
			
			// 长按事件监听实现图片 长按保存功能
			document.addEventListener('DOMContentLoaded', function() {
			        const imgs = document.querySelectorAll('img');
			        imgs.forEach(img => {
			            let timer = null;
			            img.addEventListener('touchstart', function(e) {
			                // 清除可能存在的定时器，避免重复设置
			                clearTimeout(timer);
			                // 设置定时器，如果在500ms内没有touchend，则认为是长按
			                timer = setTimeout(() => {
			                    // 长按事件处理逻辑
			                    console.log('长按事件触发', img.src);
								Invoke({
										action: 'longpressImg',
										query: {
											src: img.src
										},
										success:  (res) => {
											console.log('weviewsuccess回调', JSON.stringify(res))
											console.log(time)
											alert(`weview回调:${res}`)
										}
									})
			                    // 可以添加更多的逻辑，如显示菜单等
			                }, 500);
			            });
			            img.addEventListener('touchend', function(e) {
			                // 清除定时器，取消长按判断
			                clearTimeout(timer);
			            });
			            img.addEventListener('touchmove', function(e) {
			                // 清除定时器，如果用户移动手指，则取消长按判断
			                clearTimeout(timer);
			            });
			        });
			    });

			document.querySelector("#postMessage").addEventListener('click', function() {
				uni.postMessage({
					data: {
						action: 'postMessage',
						query: {}
					}
				});
			})
			document.querySelector("#postMessage1").addEventListener('click', function() {
				Invoke({
						action: 'getLocation',
						query: {},
						success:  (res) => {
							console.log('weviewsuccess回调', JSON.stringify(res))
							alert(`weview回调:${res.latitude}`)
						}
					})
			})
            document.querySelector("#forward").addEventListener('click', function() {
				location.href="https://wap.tuns.com.cn"
			})
			document.querySelector("#update").addEventListener('click', function() {
				Invoke({
						action: 'appUpdate',
						query: {
							url: 'https://file.tuns.com.cn/download/app/tuns/com.yuanyong.bao.baojia.apk'
						},
						success:  (res) => {
							console.log('weviewsuccess回调', JSON.stringify(res))
							alert(`weview回调:${res}`)
						},
						onProgress: (res) => {
							document.querySelector("#update").innerHTML = (`安卓app在线升级(${res.progress.toFixed(2)}%)`)
						}
					})
			})
		</script>
	</body>

</html>